<html>
<head>
  <title>Evernote Export</title>
  <basefont face="微软雅黑" size="2" />
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <meta name="exporter-version" content="YXBJ Windows/601568 (zh-CN, DDL); Windows/10.0.0 (Win64); EDAMVersion=V2;"/>
  <style>
    body, td {
      font-family: 微软雅黑;
      font-size: 10pt;
    }
  </style>
</head>
<body>
<a name="1221"/>
<h1>事件</h1>
<div>
<table bgcolor="#D4DDE5" border="0">
<tr><td><b>创建时间：</b></td><td><i>2020/4/15 16:59</i></td></tr>
<tr><td><b>更新时间：</b></td><td><i>2020/4/15 17:00</i></td></tr>
<tr><td><b>作者：</b></td><td><i>18081003141@163.com</i></td></tr>
</table>
</div>
<br/>

<div>
<span><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><img src="00-笔记_files/奥特曼.gif" type="image/gif" data-filename="奥特曼.gif" style="box-sizing: initial; -webkit-tap-highlight-color: transparent; cursor: default; position: relative; display: inline-block; padding: 1px; margin: 0px; vertical-align: text-bottom; max-width: 100%; height: auto; font-size: 12pt;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">奥特曼打小怪兽，在需要的时候触发大招行为，那么“需要的时候”其实就是指事件。</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">当</span><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">奥特曼即将被打趴下</span><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">（</span><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">事件</span><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">被触发</span><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">）的时候就会发大招（执行函数）。</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">在一个程序中，我们决定做了用户做了事情之后该做什么</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">事件的原理和hover类似。可以做到:hover做不到的事，:hover只能操作当前的元素，但是事件绑定之后可以选择任何元素。</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">事件触发三要素：通过谁触发？ 通过什么触发？触发后要做什么？</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">事件的写法：</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(255, 122, 116); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">w3c标准</span><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">：事件写在行内，但是因为结构和行为要分离，所以我们一般情况下用JavaScript的方法来绑定事件，只有再极少数情况下，才将事件写在行内，事件的绑定方法：</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">浏</span><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">览器中的节点(对象).on+</span><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(227, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">事件句柄</span><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"> </span><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">= function( ){</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">     要干什么？（放在</span><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(255, 122, 116); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-weight: bold;">浏览器中</span><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">，</span><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(255, 122, 116); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-weight: bold;">不执行</span><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">，当事件发生的时候</span><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(255, 122, 116); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-weight: bold;">再执行</span><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">。）</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">}</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">oDiv.onclick=function(){     </span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">     alert（1）</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">}</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">事件总结：事件是给浏览器定义一个</span><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(227, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">预处理</span><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">函数，当事件触发的时候，执行函数，这就是事件。</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">当事件被触发的时候奥特曼会得到一个信息（事件对象），包含了跟事件相关的一些属性和方法的封装（如：事件发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态等），只有事件在触发的时候才会得到。</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">oDiv.onmousedown=function(e){</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">     alert（e）;</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">}</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">JS缺德定律：事件对象有兼容问题；</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">所以我们先做好兼容再去使用事件对象：</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(255, 122, 116); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">e=e || window.event;</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">alert (e.buttons)观察.buttons的返回值；</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">鼠标事件及方法；</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px;"><br style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; overflow: hidden; width: inherit; max-width: inherit; position: relative; z-index: 2;"><table style="border-collapse: collapse; min-width: 100%;"><colgroup><col style="width: 206px;"></col><col style="width: 429px;"></col></colgroup><tbody style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"><tr style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; vertical-align: top;"><td rowspan="1" style="box-sizing: initial; -webkit-tap-highlight-color: transparent; word-break: break-word; position: relative; border: 1px solid rgb(204, 204, 204); width: 206px; padding: 8px;"><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;">属性名</span></div></td><td rowspan="1" style="box-sizing: initial; -webkit-tap-highlight-color: transparent; word-break: break-word; position: relative; border: 1px solid rgb(204, 204, 204); width: 429px; padding: 8px;"><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;">含义</span></div></td></tr><tr style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; vertical-align: top;"><td rowspan="1" style="box-sizing: initial; -webkit-tap-highlight-color: transparent; word-break: break-word; position: relative; border: 1px solid rgb(204, 204, 204); width: 206px; padding: 8px;"><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; font-size: 16px;">e.buttons</span></div></td><td rowspan="1" style="box-sizing: initial; -webkit-tap-highlight-color: transparent; word-break: break-word; position: relative; border: 1px solid rgb(204, 204, 204); width: 429px; padding: 8px;"><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; font-size: 16px;">返回鼠标点击按键（1左键，2右键，4中键滚轮）</span></div></td></tr><tr style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; vertical-align: top;"><td rowspan="1" style="box-sizing: initial; -webkit-tap-highlight-color: transparent; word-break: break-word; position: relative; border: 1px solid rgb(204, 204, 204); width: 206px; padding: 8px;"><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; font-size: 12pt;">e.offsetX / offsetY</span></div></td><td rowspan="1" style="box-sizing: initial; -webkit-tap-highlight-color: transparent; word-break: break-word; position: relative; border: 1px solid rgb(204, 204, 204); width: 429px; padding: 8px;"><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; font-size: 16px;">获取事件触发最近的盒子（事件源）的坐标</span></div></td></tr><tr style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; vertical-align: top;"><td rowspan="1" style="box-sizing: initial; -webkit-tap-highlight-color: transparent; word-break: break-word; position: relative; border: 1px solid rgb(204, 204, 204); width: 206px; padding: 8px;"><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;">e.</span><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; font-size: 16px;">clientX / clientY</span></div></td><td rowspan="1" style="box-sizing: initial; -webkit-tap-highlight-color: transparent; word-break: break-word; position: relative; border: 1px solid rgb(204, 204, 204); width: 429px; padding: 8px;"><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; font-size: 16px;">获取可视区的坐标（根据浏览器的定位）</span></div></td></tr><tr style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; vertical-align: top;"><td rowspan="1" style="box-sizing: initial; -webkit-tap-highlight-color: transparent; word-break: break-word; position: relative; border: 1px solid rgb(204, 204, 204); width: 206px; padding: 8px;"><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;">e.</span><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; font-size: 16px;">screenX / screenY</span></div></td><td rowspan="1" style="box-sizing: initial; -webkit-tap-highlight-color: transparent; word-break: break-word; position: relative; border: 1px solid rgb(204, 204, 204); width: 429px; padding: 8px;"><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; font-size: 16px;">获取整个屏幕的坐标</span></div></td></tr><tr style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; vertical-align: top;"><td style="box-sizing: initial; -webkit-tap-highlight-color: transparent; word-break: break-word; position: relative; border: 1px solid rgb(204, 204, 204); width: 206px; padding: 8px;"><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; font-size: 12pt;">e.pageX / e.pageY</span></div></td><td style="box-sizing: initial; -webkit-tap-highlight-color: transparent; word-break: break-word; position: relative; border: 1px solid rgb(204, 204, 204); width: 429px; padding: 8px;"><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; font-size: 16px;">获取文档的坐标（包含滚动条）</span></div></td></tr></tbody></table></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px;"><img src="00-笔记_files/Image.png" type="image/png" data-filename="Image.png" style="box-sizing: initial; -webkit-tap-highlight-color: transparent; cursor: default; position: relative; display: inline-block; padding: 1px; margin: 0px; vertical-align: text-bottom; max-width: 100%; height: auto; font-size: 12pt;"/></div></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">键盘事件：keydown、keyup、keypress</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">document.onkeydown = function(e){</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">     </span><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">console.log(e.keyCode)</span><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">   </span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">}</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">键盘上每一个键都有一个唯一的编码，用来识别当前用户正在操作的是键盘上哪一个键</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">有兼容问题</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">e.keyCode || e.which</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; font-size: 12pt;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">特殊键码：是否按下alt  ctrl  和 shift</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">e.altKey</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">e.ctrlKey</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">e.shiftKey</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(255, 122, 116); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">返回值是布尔值；</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">可以用来判断组合键</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">if（e.keyCode==13&amp;&amp;e.altKey）{</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">     alert('同时按下了enter和alt')；</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">}</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-weight: bold;">练习</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">一串内容跟随鼠标</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">小键盘控制元素上下左右移动</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><hr style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 1px 0px; padding-top: 1px; border-color: rgb(255, 255, 255); border-style: solid none; border-width: thick 0px; background-color: rgb(153, 153, 153);"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">默认行为（浏览器）</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(34, 34, 34); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">有一些html元素默认的行为，比如说a标签，点击后有跳转动作；form表单中的submit类型的input有一个默认提交跳转事件；reset类型的input有重置表单行为。</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(34, 34, 34); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">但是，有些时候我们是不需要默认事件的，所以就需要阻止默认事件</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(34, 34, 34); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">return false；</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15); font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; font-size: 16px; letter-spacing: normal; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">if(e.preventDefault) {</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; font-size: 12pt; color: rgb(34, 34, 34); font-family: Monaco;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; font-size: 16px; letter-spacing: normal; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">   e.preventDefault();</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(51, 51, 51); font-variant: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); font-size: 12pt; font-family: Monaco;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; font-size: 16px; letter-spacing: normal; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">}else {</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; font-size: 12pt; color: rgb(34, 34, 34); font-family: Monaco;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; font-size: 16px; letter-spacing: normal; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">    window.event.returnValue = false;    </span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;">    </span><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; font-size: 12pt;">//return false;</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(51, 51, 51); font-variant: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); font-size: 12pt; font-family: Monaco;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; font-size: 16px; letter-spacing: normal; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">}</span></div></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">1、右键菜单（上下文菜单）  oncontextmenu</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">2、表单提交事件 onsubmit</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-weight: bold;">练习</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">1、</span><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">输入框模拟select下拉菜单</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">2、表格即时编辑</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-weight: bold;">事件流</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; font-size: 12pt;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 12pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">子元素的事件被触发时，父级也会被触发（冒泡）</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; font-size: 12pt;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 14pt; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">一个完整事件流包含  捕获阶段 ---&gt; 目标阶段  ---&gt;冒泡阶段</span></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; font-size: 12pt;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: medium; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br clear="none" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent;"/></div><div><br/></div><div><span style="font-size: 16pt; font-weight: bold;"><br/></span></div><div><span style="font-size: 16pt; font-weight: bold;"><br/></span></div><div><span style="font-size: 16pt; font-weight: bold;">事件冒泡</span></div><div><br clear="none"/></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 12pt;">           </span><img src="00-笔记_files/涟漪.gif" type="image/gif" data-filename="涟漪.gif" style="font-size: 12pt;"/></div><div><br clear="none" style="font-size: 12pt;"/></div><div><br clear="none" style="font-size: 12pt;"/></div><div><br clear="none" style="font-size: 12pt;"/></div><div><img src="00-笔记_files/吐泡泡.gif" type="image/gif" data-filename="吐泡泡.gif" style="font-size: 12pt;"/></div><div><br clear="none" style="font-size: 12pt;"/></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 12pt;">Netscape认为，石头先扔进河里，再从河里确定了一个扔石头的点，从外往内逐渐精确的过程（捕获）</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 12pt;">w3c认为，石头扔进去先到达准确的那个点，涟漪</span><span style="font-size: 12pt;">从内往外扩散（冒泡）</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">事件流：事件执行的顺序</span></div><div><br clear="none"/></div><div><img src="00-笔记_files/捕获冒泡.png" type="image/png" data-filename="捕获冒泡.png" width="459"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">子元素的事件被触发时，父级也会被触发（冒泡）</span></div><div><br/></div><div><span style="font-size: 14pt;">一个完整事件包含  捕获阶段 ---&gt; 目标阶段  ---&gt;冒泡阶段</span></div><div><br/></div><div><br clear="none"/></div><div><span style="font-size: 16px;">冒泡是可以阻止的</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">     e.stopPropagation( );</span></div><div><span style="font-size: 12pt;">     e.cancelBubble=true;//兼容IE</span></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 18px; font-weight: bold;">事件监听</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">DOM0级事件处理，是一种赋值方式，是被所有浏览器所支持的，简单易懂容易操作；</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">DOM2级事件处理是所有DOM节点中的方法，可以重复监听，但是浏览器兼容存在问题；</span></div><div><br clear="none"/></div><div><br clear="none"/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="font-family: Monaco; color: #333333; font-size: 10pt;">oDiv.onclick = function(){ .... }    //DOM0级</span></div><div><br clear="none" style="font-family: Monaco; color: #333333;"/></div><div><span style="font-family: Monaco; color: #333333; font-size: 10pt;">//DOM2级</span></div><div><span style="font-family: Monaco; color: #333333; font-size: 10pt;">if(window.attachEvent){</span></div><div><span style="font-family: Monaco; color: #333333; font-size: 10pt;">    oDiv.attachEvent(&quot;onclick&quot;, function(){ ... });  // IE只有冒泡阶段,所以没有第三个参数，而且需要加on；</span></div><div><span style="font-family: Monaco; color: #333333; font-size: 10pt;">}else{</span></div><div><span style="font-family: Monaco; color: #333333; font-size: 10pt;">    oDiv.addEventListener( &quot;click&quot;, function(){ ... },false);  // false指冒泡阶段</span></div><div><span style="font-family: Monaco; color: #333333; font-size: 10pt;">}</span></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-family: Monaco; color: #333333; font-size: 10pt;">//移除事件监听，第二个参数为必须，移除的事件处理函数</span></div><div><span style="font-family: Monaco; color: #333333; font-size: 12pt;">oDiv.removeEventListener( &quot;click&quot;,fn）</span></div><div><span style="font-family: Monaco; color: #333333; font-size: 12pt;">oDiv.detachEvent(&quot;onclick&quot;,fn)</span></div><div><br/></div></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">鼠标滚轮事件onmousewheel模拟滚动条</span></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 14pt; font-weight: bold;">事件委托（事件代理）委派</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">什么是事件委托：全班同学都要做《五年高考三年模拟》，每个同学自己去书店买？不用，委托老师帮你们买，同学们只管认真做题就好啦，好开心。</span></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以处理某一类型的所有事件</span></div><div><span style="font-size: 12pt;">使用场景主要用于事件源不确定的情况，可以把事件委托给父级</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">判断事件源：</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">    e.target || e.srcElement</span></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 16pt; font-weight: bold;">练习</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">1、表格编辑事件委托版</span></div><div><span style="font-size: 12pt;">2、拖拽</span></div></span>
</div></body></html> 